<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>折线</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="../dist/Mapv.js"></script>
    <script type="text/javascript" src="example.js"></script>
    <script type="text/javascript" src="data/qx.js"></script>
    <script type="text/javascript">
    /**
     * @file 示例代码
     */
    bmap.centerAndZoom(new BMap.Point(116.3911, 39.9073), 11); // 初始化地图,设置中心点坐标和地图级别

    // 第一步创建mapv示例
    var mapv = new Mapv({
        drawTypeControl: true,
        map: bmap // 百度地图的map实例
    });

    bmap.setMapStyle({
        styleJson: [
          {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": {
                              "color": "#ffdfa6"
                    }
          },
          {
                    "featureType": "land",
                    "elementType": "all",
                    "stylers": {
                              "color": "#b52127"
                    }
          },
          {
                    "featureType": "green",
                    "elementType": "all",
                    "stylers": {
                              "color": "#b52127"
                    }
          },
          {
                    "featureType": "manmade",
                    "elementType": "all",
                    "stylers": {
                              "color": "#b52127"
                    }
          },
          {
                    "featureType": "building",
                    "elementType": "all",
                    "stylers": {
                              "color": "#b52127"
                    }
          },
          {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#ffdfa6"
                    }
          },
          {
                    "featureType": "railway",
                    "elementType": "geometry",
                    "stylers": {
                              "color": "#6a0d10"
                    }
          },
          {
                    "featureType": "highway",
                    "elementType": "geometry.fill",
                    "stylers": {
                              "color": "#74001b",
                              "lightness": -10
                    }
          },
          {
                    "featureType": "highway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                              "color": "#da3c3c"
                    }
          },
          {
                    "featureType": "arterial",
                    "elementType": "geometry.fill",
                    "stylers": {
                              "color": "#74001b"
                    }
          },
          {
                    "featureType": "arterial",
                    "elementType": "geometry.stroke",
                    "stylers": {
                              "color": "#da3c3c"
                    }
          },
          {
                    "featureType": "local",
                    "elementType": "geometry.fill",
                    "stylers": {
                              "color": "#990c19"
                    }
          },
          {
                    "featureType": "local",
                    "elementType": "geometry.stroke",
                    "stylers": {
                              "color": "#da3c3c"
                    }
          },
          {
                    "featureType": "subway",
                    "elementType": "all",
                    "stylers": {
                              "hue": "#ff0000"
                    }
          },
          {
                    "featureType": "all",
                    "elementType": "labels.text.stroke",
                    "stylers": {
                              "color": "#ee8585"
                    }
          },
          {
                    "featureType": "all",
                    "elementType": "all",
                    "stylers": {
                              "visibility": "off"
                    }
          }
]
    });

    var data = [];
    for (var i in qx) {
        var obj = {
            geo: [],
            count: 1
        }
        for (var j in qx[i]) {
            obj.geo.push([qx[i][j][0], qx[i][j][1]]);
        }
        data.push(obj);
    }

    var layer = new Mapv.Layer({
        zIndex: 1,
        mapv: mapv,
        // dataType: 'polyline',
        // coordType: 'bd09mc',
        data: data,
        drawType: 'line',
        drawOptions: {
            // lineWidth: 5,
            // strokeStyle: "rgba(255, 50, 50, 0.3)"
        }
    });
    </script>
</body>

</html>
